import React from 'react';
import axios from 'axios';
import {checkLogin,datas} from './../../api';
import {get} from './../../store';

class Chart extends React.Component {
	constructor(props) {
	  super(props);
	  let status = get('login_status');
	  if(!status) {
	  	status = "false";
	  }
	  this.state = {
	  	tabs: ['今日发帖数','在线用户','总帖数','会员总数','请登录↓','欢迎登陆'],
	  	data: [],
	  	loginStatus:status
	  };
	}

	componentWillMount() {
		this.init();
	}

	init() {
		datas().then(res=>{
			this.setState({
			  data: res.data
			});
		});
	}

	render() {
		return (
			<div id="chart" className="wp cl">
				<div className="bm">
					<div className="chart">
						<ul>
							<li id="spt">{this.state.tabs[0]}<em>{this.state.data.spt}</em></li>
							<li id="spy">{this.state.tabs[1]}<em>{this.state.data.soc}</em></li>
							<li id="sps">{this.state.tabs[2]}<em>{this.state.data.sps}</em></li>
							<li id="sus">{this.state.tabs[3]}<em>{this.state.data.sus}</em></li>
							<li id="loginUser" className="noborder">{this.state.loginStatus=="false"?this.state.tabs[4]:this.state.tabs[5]}<em >{this.state.loginStatus=="false"?<a href="login" className="pleaseLogin" style={{color:'red'}}>请登录</a>:<a href="/personal" title="个人中心" className="pleaseLogin" style={{color:'green',fontSize:'12px'}}>{window.localStorage.getItem('username')}</a>}</em></li>
						</ul>
					</div>
				</div>
				<div className="mn">
					{this.props.children}
				</div>
			</div>
		);
	}	
}

export default Chart